import React, { memo } from "react";
import { useDispatch } from "react-redux";
import { FiveBtn } from "./style";
import { getCount } from "@/utils/format-utils";
import {
  addSongId,
  getSongDetailsMessage,
} from "../../../pages/player/store/actionType";

export default memo(function Five(props) {
  const dispatch = useDispatch();

  const addSongs = () => {
    if (props.id != undefined) {
      dispatch(addSongId(props.id));
    }
  };

  const getMusicLists = () => {
    dispatch(getSongDetailsMessage(props.id));
    dispatch(addSongId(props.id));
  };

  return (
    <FiveBtn>
      <div className="playlist-play-box">
        <a
          onClick={getMusicLists}
          title="播放"
          className="playlist-playbtn button2"
        >
          <i className="button2">
            <em className="ply button2"></em>
            播放
          </i>
        </a>
        <a
          onClick={addSongs}
          className="playlist-play-addlist button2"
          title="添加到播放列表"
        >
          {" "}
        </a>
        <a className="addplaylist u-btn button2">
          <i className="addicon u-btn-i button2">
            {props.subscribedCount == 0
              ? "收藏"
              : getCount(props.subscribedCount)}
          </i>
        </a>
        <a className="u-btn button2">
          <i className="zf u-btn-i button2">
            {props.shareCount == 0 ? "分享" : getCount(props.shareCount)}
          </i>
        </a>
        <a className="u-btn button2">
          <i className="xz u-btn-i button2">下载</i>
        </a>
        <a className=" u-btn button2">
          <i className="pl u-btn-i button2">
            (
            {props.commentNumber < 100000
              ? props.commentNumber
              : getCount(props.commentNumber)}
            )
          </i>
        </a>
      </div>
    </FiveBtn>
  );
});
